﻿@using BonjourQuotation.UI.Models.PartialModel
@using MvcCheckBoxList
@model OperationGroupVendorGridViewModel
@{
    Layout = null;
}
<script type="text/javascript">
    var GrVGridModel;
    debugger;
    LoadGrVGrid();

    function LoadGrVGrid()
    { 
       RoomVndModel = $(@Html.Raw(Json.Encode(Model))).JSModel();
        var RoomVndcolumnHeaders = [];
        var RoomVndcolumns = [];
        var RoomVndcolWidth = [];
        var RoomVndTitleSingle = [];
        var RoomVndTitleDouble = [];
        var RoomVndTitleTwin = [];
        var RoomVndTitleTriple = [];
        var RoomVndTitleQuad = [];
        var RoomVndTitleDriver = [];
        var RoomVndTitleGuide = [];
        var RoomVndType = [];

        // Init RoomTitle_s
        $(RoomVndModel[0].GVendorRoomTitleSingle).each(function (index, elem) {
            RoomVndTitleSingle.push(elem.Text);
        });
        $(RoomVndModel[0].GVendorRoomTitleDouble).each(function (index, elem) {
            RoomVndTitleDouble.push(elem.Text);
        });
        $(RoomVndModel[0].GVendorRoomTitleTwin).each(function (index, elem) {
            RoomVndTitleTwin.push(elem.Text);
        });
        $(RoomVndModel[0].GVendorRoomTitleTriple).each(function (index, elem) {
            RoomVndTitleTriple.push(elem.Text);
        });
        $(RoomVndModel[0].GVendorRoomTitleQuad).each(function (index, elem) {
            RoomVndTitleQuad.push(elem.Text);
        });
        $(RoomVndModel[0].GVendorRoomTitleDriver).each(function (index, elem) {
            RoomVndTitleDriver.push(elem.Text);
        });
        $(RoomVndModel[0].GVendorRoomTitleGuide).each(function (index, elem) {
            RoomVndTitleGuide.push(elem.Text);
        });
        // init Room Type
        $(RoomVndModel[0].GVendorRoomType).each(function (index, elem) {
            RoomVndType.push(elem.Text);
        });

        RoomVndcolumnHeaders.push("#");
        RoomVndcolumns.push({ data: "GVendorLineNo", type: "numeric" });
        RoomVndcolWidth.push(40);

        RoomVndcolumnHeaders.push("Room Type");
        RoomVndcolumns.push({ data: "GVendorSelectedRoomType", type: "dropdown", source: RoomVndType });
        RoomVndcolWidth.push(110);

        RoomVndcolumnHeaders.push("Title");
        RoomVndcolumns.push({ data: "GVendorSelectedRoomTitle", type: "dropdown" });
        RoomVndcolWidth.push(140);

        RoomVndcolumnHeaders.push("Names");
        RoomVndcolumns.push({ data: "GVendorNames", type: "text" });
        RoomVndcolWidth.push(250);

        RoomVndcolumnHeaders.push("Pax");
        RoomVndcolumns.push({ data: "GVendorNoOfPerson", type: "numeric", readOnly: true });
        RoomVndcolWidth.push(40);

        RoomVndcolumnHeaders.push("Notes");
        RoomVndcolumns.push({ data: "GVendorNotes", type: "text" });
        RoomVndcolWidth.push(200);

        RoomVndcolumnHeaders.push("Arrival Date");
        RoomVndcolumns.push({ data: "GVendorArrivalDate", type: "date", dateFormat: 'D, dd/M/yy' });
        RoomVndcolWidth.push(140);

        RoomVndcolumnHeaders.push("Departure Date");
        RoomVndcolumns.push({ data: "GVendorDepartureDate", type: "date", dateFormat: 'D, dd/M/yy' });
        RoomVndcolWidth.push(140);

        RoomVndcolumnHeaders.push("Delete");
        RoomVndcolumns.push({ data: "GVendorDeleteHtml", renderer: "html" });
        RoomVndcolWidth.push(60);
        GrpVndRedColorRendererForNegative = function (instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.NumericRenderer.apply(this, arguments);
            td.style.color = 'red';
        };
        var RoomVnddata = RoomVndModel[0].Rows;
        $("#OperGroupVendorRoomGrid").show();
        $('#OperGroupVendorRoomGrid').handsontable({
            data: RoomVnddata,
            minSpareRows: 1,
            colHeaders: RoomVndcolumnHeaders,
            colWidths: RoomVndcolWidth,
            contextMenu: false,
            manualColumnResize: true,
            manualRowResize: true,
            columns: RoomVndcolumns,
            //  isEmptyRow: customIsEmptyRow,
            afterChange: function (data, source) {
                if (data != null)
                {
                    CheckOperVendConfRoomChanges();
                    if (data[0][1] == "GVendorSelectedRoomType") {
                        debugger;
                        var instance = this;
                        var row = data[0][0];
                        ChangeRoomTypeID(data[0][3], instance, row);
                        var cellProp = instance.getCellMeta(row, "GVendorSelectedRoomTitle");
                        SetRoomTitleSource(data[0][3], cellProp);
                        instance.getData()[row].GVendorSelectedRoomTitle = cellProp.source[0];
                        var PaxcellProp = instance.getCellMeta(row, "GVendorNoOfPerson");
                        instance.getData()[row].GVendorNoOfPerson = SetPaxSource(data[0][3], PaxcellProp);
                        instance.render();
                    }
                }    
            },
            cells: function (row, col) {
                var cellProp = this;
                if (cellProp.renderer == Handsontable.renderers.NumericRenderer && cellProp.instance.getDataAtCell(row, col) < 0) {
                    cellProp.renderer = GrpVndRedColorRendererForNegative;
                }
                if (cellProp.prop == "GVendorSelectedRoomTitle" && RoomVnddata.length > 1) {
                    var roomType = RoomVnddata[row].GVendorSelectedRoomType;
                    SetRoomTitleSource(roomType, cellProp);
                    return cellProp;
                }

            }
        });
        function SetPaxSource(roomType, PaxcellProp) {
            switch (roomType) {
                case "Single":
                    return 1;
                case "Double":
                    return 2;
                case "Twin":
                    return 2;
                case "Triple":
                    return 3;
                case "Quad":
                    return 4;
                case "Driver":
                    return 0;
                case "Guide":
                    return 0;
            }
        }
        function ChangeRoomTypeID(RoomType, instance, row) {
            $(RoomVndModel[0].GVendorRoomType).each(function (index, elem) {
                if (elem.Text == RoomType) {
                    instance.getData()[row].GVendorSelectedRoomTypeID = elem.Value;
                }
            });
        }
        function CheckOperVendConfRoomChanges() {
            if (!$("#OperVendorRoomSaveBtn").hasClass("GridDataChanged"))
                $("#OperVendorRoomSaveBtn").addClass("GridDataChanged");
        }

        function SetRoomTitleSource(roomType, cellProp) {
            switch (roomType) {
                case "Single":
                    cellProp.source = RoomVndTitleSingle;
                    break;
                case "Double":
                    cellProp.source = RoomVndTitleDouble;
                    break;
                case "Twin":
                    cellProp.source = RoomVndTitleTwin;
                    break;
                case "Triple":
                    cellProp.source = RoomVndTitleTriple;
                    break;
                case "Quad":
                    cellProp.source = RoomVndTitleQuad;
                    break;
                case "Quad":
                    cellProp.source = RoomVndTitleQuad;
                    break;
                case "Driver":
                    cellProp.source = RoomVndTitleDriver;
                    break;
                case "Guide":
                    cellProp.source = RoomVndTitleGuide;
                    break;
            }
        }
    }

    // Delete Group Vendor Line
    function RemoveGroupVendorRoomByLine(GroupId, VendorID, LineNo) {
        debugger;
        $("#GVendorIsRoomRemove").val("True");
        $("#GVendorRemoveGroupID").val(GroupId);
        $("#GVendorRemoveVendorID").val(VendorID);
        $("#GVendorRemoveLineNo").val(LineNo);
        $("#GVendorArrivalDate").val($("#ConfArrivalDate").val());
        $("#GroupVendorRoomGridUpdate").click();
    }
    

    // Save Group Vendor Room Grid Data
    function GroupVendorRoomGridSave() {
        debugger;
        var Rows = $('#OperGroupVendorRoomGrid').data('handsontable').getData();
        var IsValidNames = true;
        var IsValidRoomType = true;
        var IsValidArrivalDateWrong = true;
        var IsValidDepartureDateWrong = true;
        if (Rows.length > 1) {
            $(Rows).each(function (index, elem) {
                if (index < Rows.length - 1) {
                    // all validations here
                    if (elem.GVendorNames == undefined || (elem.GVendorNames != undefined && elem.GVendorNames.length == 0))
                        IsValidNames = false;
                    if (elem.GVendorSelectedRoomType == undefined || (elem.GVendorSelectedRoomType != undefined && elem.GVendorSelectedRoomType.length == 0))
                        IsValidRoomType = false;
                    if (elem.GVendorArrivalDate != undefined && (elem.GVendorArrivalDate.length > 0 && !Date.parse(elem.GVendorArrivalDate)))
                        IsValidArrivalDateWrong = false;
                    if (elem.GVendorDepartureDate != undefined && (elem.GVendorDepartureDate.length > 0 && !Date.parse(elem.GVendorDepartureDate)))
                        IsValidDepartureDateWrong = false;
                }
            });
            if (IsValidNames == false) {
                jAlert("Names can't be empty.", "Error!");
                return;
            }
            if (IsValidRoomType == false) {
                jAlert("Room Type can't be empty.", "Error!");
                return;
            }
            if (IsValidArrivalDateWrong == false) {
                jAlert("Please Input Valid Arrival Date.", "Error!");
                return;
            }
            if (IsValidDepartureDateWrong == false) {
                jAlert("Please Input Valid Departure Date.", "Error!");
                return;
            }
            var OperationGroupVendorGridViewModel = {
                Rows: Rows,
                GVendorGroupID: $("#GVendorGroupID").val(),
                GVendorVendorID: $("#GVendorVendorID").val(),
                GVendorArrivalDate: $("#ConfArrivalDate").val(),
                RoomListEditNotes: $("#RoomListEditNotes").val(),
                PorterageFlag: $("#PorterageFlag").is(":checked") ? true : false,
                PorterageNotes: $("#PorterageNotes").val(),
            };

            var DTO = JSON.stringify(OperationGroupVendorGridViewModel);

            $.ajax({
                url: urls["OperationGroupVendorGridSave"],
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: DTO,
                success: function (data) {
                    $("#tabRoomingList").html(data);
                    if ($("#OperGVendorRoomMessageInfo").val() != "")
                        jAlert($("#OperGVendorRoomMessageInfo").val(), 'Error!');
                },
                error: function (xhr) {
                    //   alert('Error: ' + xhr.statusText);
                },
                complete: function () {
                    // load VendorConfirmation
                    $.ajax({
                        url: urls["OperationLoadConfirmation"],
                        data: { 'GroupID': $("#ConfGroupID").val(), 'VendorID': $("#ConfVendorID").val(), 'ArrivalDate': $("#ConfArrivalDate").val() },
                        type: 'POST',
                        success: function (data) {
                            $("#tabConfirmation").html(data);
                        },
                        error: function (xhr) {
                            //  alert('Error: ' + xhr.statusText);
                        },
                        complete: function () {
                            InitVendorConfirmCalendars();
                        }
                    });
                    LoadHotelGridByGroupCode($("#ConfGroupID").val());
                }
            });
        }
        else {
            jAlert("You have not any data for save", "Error!");
        }
    }
        // report exact vendor/hotel Rooming List
        $(document).on('click', '#GroupVendorRoomingReportBtn', function () {
            window.open("../Report/RoomingListReport?GroupID=" + $("#GVendorGroupID").val() + "&VendorID=" + $("#GVendorVendorID").val() + "&ArrivalDate=" + $("#ConfArrivalDate").val());
        });
        // Hotel Room details changed
        $(document).on('change', '.VendorConfRoomDetData', function () {
            if (!$("#OperVendorRoomSaveBtn").hasClass("GridDataChanged"))
                $("#OperVendorRoomSaveBtn").addClass("GridDataChanged");
        });
        function OperGroupVendorRoomComplete() {
            if ($("#OperGVendorRoomMessageInfo").val() != "")
                jAlert($("#OperGVendorRoomMessageInfo").val(), 'Error!');
            // load VendorConfirmation
            $.ajax({
                url: urls["OperationLoadConfirmation"],
                data: { 'GroupID': $("#ConfGroupID").val(), 'VendorID': $("#ConfVendorID").val(), 'ArrivalDate': $("#ConfArrivalDate").val() },
                type: 'POST',
                success: function (data) {
                    $("#tabConfirmation").html(data);
                },
                error: function (xhr) {
                    //  alert('Error: ' + xhr.statusText);
                },
                complete: function () {
                    InitVendorConfirmCalendars();
                }
            });
            // load Hotel tab
            LoadHotelGridByGroupCode($("#ConfGroupID").val());
        }

</script>

@using (Ajax.BeginForm("SaveOperationGroupVendorGridData", "Operation", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "tabRoomingList", OnComplete = "OperGroupVendorRoomComplete", InsertionMode = InsertionMode.Replace }, new { enctype = "multipart/form-data", id = "OperGroupVendorGridForm" }))
{
   <div class="OperationTabsTitleDiv">
        @Html.LabelForModel(Model.GVendorVendorName, new { @class = "OperationTabsTitle" })
    </div> 
    @Html.HiddenFor(model=>model.GVendorGroupID)
    @Html.HiddenFor(model=>model.GVendorVendorID)
    @Html.HiddenFor(model=>model.GVendorIsRoomRemove)
    @Html.HiddenFor(model=>model.GVendorArrivalDate)
    @Html.HiddenFor(model=>model.GVendorRemoveGroupID)
    @Html.HiddenFor(model=>model.GVendorRemoveVendorID)
    @Html.HiddenFor(model=>model.GVendorRemoveLineNo)
    @Html.HiddenFor(model=>model.OperGVendorRoomMessageInfo)
   <div style="padding-bottom:8px;">
                   <div>
                           <span style="margin-top:10px;">@Html.LabelFor(model => model.RoomListNotes)</span>
                           @Html.TextAreaFor(model => Model.RoomListNotes, new { @class = "table_inputs_655 VendorConfRoomDetData", @style="height:65px", @ReadOnly = "true" })
                           @Html.TextAreaFor(model => Model.RoomListEditNotes, new { @class = "table_inputs_400 VendorConfRoomDetData", @style = "height:65px" })
                  </div>
                  <div style="float:left;">
                        <span>@Html.LabelFor(model => model.PorterageFlag)</span>
                        @Html.CheckBoxFor(model=>Model.PorterageFlag, new { @class = "VendorConfRoomDetData" })
                        <div style="@(@Model.PorterageFlag?"":"display:none")" id="GVendorPorterDiv">
                        @Html.TextBoxFor(model => Model.PorterageNotes, new { @class = "table_inputs_800 VendorConfRoomDetData" })
                        </div>
                  </div>
       <div id="OperGroupVendorRoomGrid" class="handsontable" style="width: 1185px; height:342px; overflow:auto; display:none;"></div>
    </div>
    <div class="row form-row" style="padding-bottom: 10px;">
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; margin-left: 30px;">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize" style="width: 20px !important;">@Html.LabelFor(model => model.TotalPax)</span>
                @Html.LabelForModel(Model.TotalPax, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 12% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize" style="width: 5px !important;">@Html.LabelFor(model => model.TotalRooms)</span>
                @Html.LabelForModel(Model.TotalRooms, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.TotalSgl)</span>
                @Html.LabelForModel(Model.TotalSgl, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.TotalDbl)</span>
                @Html.LabelForModel(Model.TotalDbl, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.TotalTwn)</span>
                @Html.LabelForModel(Model.TotalTwn, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.TotalTrpl)</span>
                @Html.LabelForModel(Model.TotalTrpl, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.TotalQud)</span>
                @Html.LabelForModel(Model.TotalQud, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.TotalDriver)</span>
                @Html.LabelForModel(Model.TotalDriver, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
        <div class=" col-lg-2 withoutPadding" style="width: 10% !important; ">
            <div class="input-group">
                <span class="input-group-addon SumControlsLabelFSize">@Html.LabelFor(model => model.TotalGuide)</span>
                @Html.LabelForModel(Model.TotalGuide, new { @class = "form-control SumControls12Size" })
            </div>
        </div>
    </div>
    <button class="btn14  btn60 pull-right" type="button" id="OperVendorRoomSaveBtn" onclick="GroupVendorRoomGridSave()">Save</button>
    <button style="display:none;" id="GroupVendorRoomGridUpdate" type="submit"></button>
    <input type="button" id="GroupVendorRoomingReportBtn" class="btn14  btn120 pull-left" value="Preview">
}





